<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		webpack 默认打包
		
		1. 全局安装打包
		把webpack 安装到全局，直接打包就可以
		缺点：如果webpack@5，只能打包webpack@5的项目(有局限性)
		
		npm i webpack@5.49.0 webpack-cli@4.7.2 -g（注意版本的配合）
		
		在命令提示符运行 webpack--->打包
		
		默认将src的index.js作为主入口文件，
		打包后多出一个dist文件夹，里面main.js就是打包后的所有的js文件
		
		2. 本地安装打包
		npm i webpack@5.49.0 webpack-cli@4.7.2(要打包的文件夹里)
		
		在 package.json 里 配置可执行的脚本命令
		"scripts": {
			"serve":"webpack"
		},
		
		在命令提示符运行 npm run serve--->打包
		
		2.1 如果webpack 是5.2以上，就可以 npx webpack （了解）
		
		非默认打包,如果没有webpack.config.js（wbk根文件处）文件，就走默认打包，
		有就按照webpack.config.js打包
		
		区分不同环境打包---方法1
		webpack.config.development.js
		webpack.config.production.js
		
		配置不同脚本命令：package.json
		"scripts": {
			"dev":"webpack --config webpack.config.development.js",
			"build":"webpack --config webpack.config.production.js"
		},
		
		npm run dev 开发环境
		npm run build 生产环境
		
		区分不同环境打包---方法2（配置webpack.config.js）
		
		先下载 npm i cross-env --save-dev  ---》配置可执行的脚本命令
		"scripts": {
			"D":"cross-env NODE_ENV=development webpack",
			"P":"cross-env NODE_ENV=production webpack"
		},
		
		npm run D ----> 开发环境  NODE_ENV=development
		npm run P ---->生产环境   NODE_ENV=production
		
		配置webpack.config.js----或运算
		
		3. 打包压缩出现 html 文件，将js放到html里
		
		先下载，npm i html-webpack-plugin -–save-dev 插件，
		打包就会出现 html文件(默认 index.html,内容是空的，与你自己创建的HTML无关)
		
		使用了插件（使用步骤）
		1.webpack.config.js中先“导入”插件(plugins) 
		let HtmlWebpackPlugin = require("html-webpack-plugin");
		
		2. 使用
		plugins:[
			new HtmlWebpackPlugin()
		]
		
		4. 实现热更新,浏览器自动打开
		安装热更新插件 npm install webpack-dev-server –save-dev
		
		配置热更新
		devServer:{//打包后，浏览器会自动打开页面，并且热更新
			port:"8080",//端口号
			host:"127.0.0.1",//域名
			compress:true,//是否开启服务器端压缩
			//progress:true,//是否产看编译进度
			static: {//访问的资源路径
				directory: path.join(__dirname, 'dist'),
			},
			open:true,//是否自动打开浏览器
			hot:true,//是否自动开启热更新
			proxy:{
				"/": {
					target:"https://www.jianshu.com",
					changeOrigin: true//设置伪装访问源
				}
			}
		}
		
		配置可执行脚本命令
		"scripts": {
			"serve":"webpack server",
			"build":"webpack"
		},
		
		npm run serve   开发环境，不会打包出结果，可以热更新
		npm run build   生产环境，会有打包结果
		
		
		删除打包后多余js文件
		1.npm i clean-webpack-plugin –save-dev  插件
		2.导入(plugins) 
		  let {CleanWebpackPlugin}=require("clean-webpack-plugin");
		2.使用
			plugins: [
				new CleanWebpackPlugin()
			]
		
		配置CSS的解析和压缩规则
		
		css 主要使用loader
		
		1. 先下载各种的css loader
		2. webpack.config.js,不需要导入，直接配置
		module:{//加载器
			rules:[{//样式loader
				test:/\.(css|less)$/,
				use:[//顺序规则: 从下往上执行
					"style-loader",//将css插入到HTML页面
					"css-loader",//识别css @import 语法
					"postcss-loader",//添加属性前缀
					"less-loader"//将less-->css
				]
			}
			// ,{//图片loader
				
			// },{//js loader
			
			// }
			]
		}
		
		属行前缀，直接postcss-loader这一个，不全
		
		1. 在根目录里面创建一个 postcss.config.js
		module.exports = {
		    plugins: [
		        require('autoprefixer')
		    ]
		};
		
		2.package.json 配置 浏览器某些版本，添加属性前缀
		"browserslist": [
		    "> 1%",
		    "last 2 versions"
		]
		
		抽离css, 通过link引入
		1. 下载插件 npm i mini-css-extract-plugin –save-dev
		2. webpack.config.js中导入，使用
		
		css 压缩
		1. 下载压缩插件 npm i optimize-css-assets-webpack-plugin –save-dev
		2. webpack.config.js中导入，使用
		
		let OptimizeCssAssetsWebpackPlugin=require("optimize-css-assets-webpack-plugin");
		
		optimization:{//优化项---压缩的插件
			minimize:true,//是否压缩
			minimizer: [
				// 实现CSS压缩
				new OptimizeCssAssetsWebpackPlugin()
			]
		},
		
		js处理

		1.将es6---》es5  处理class
		先下载插件
		2.配置loader
		
		{
		    test: /\.js$/,
		    use: [{
		        loader: 'babel-loader',
		        options: {
		            //=>转换的语法预设（ES6->ES5）
		            presets: [
		                "@babel/preset-env"
		            ],
		            //=>基于插件处理ES6/ES7中CLASS的特殊语法
		            plugins: [
		                ["@babel/plugin-proposal-class-properties", {
		                    "loose": true
		                }],
		                "@babel/plugin-transform-runtime"//尽可能的编译es6特殊语法
		            ]
		        },
			}]
		},
		
		
		压缩js
		下载插件：npm i terser-webpack-plugin --save-dev
		
		导入使用
		let TerserPlugin=require("terser-webpack-plugin");
		
		optimization: { //优化项---压缩的插件
			minimize: true, //是否压缩
			minimizer: [
				new TerserPlugin()//实现js压缩
			]
		}
		
		loder里面使用:
		exclude: /node_modules/ //除了node_modules之外，都处理
		include: path.resolve(__dirname, 'src')//只处理src 目录里面的文件
		
		处理Promise,只需要在入口js文件中，引入
		import '@babel/polyfill';
		
		处理图片（css里一定要用到图片）
		1.下载插件 npm i file-loader url-loader html-withimg-loader --save-dev
		
		2.配置loader
		{
			test: /\.(png|jpe?g|gif)$/i,
			use: [{
				//=>把指定大小内的图片BASE64
				//=>不在指定范围的采用file-loader进行处理
				loader: 'url-loader',
				options: {
					//小于200kB的图片自动 base64，大于的 file-loader
					limit: 200 * 1024,
					//输出后的路径 dist/images
					outputPath: '/images',
					//name:'[name].[ext]'
				}
			}],
			exclude: /node_modules/
		}, {
			test: /\.(svg|eot|ttf|woff|woff2)$/i,
			use: "file-loader"
		}, {
			test: /\.html$/,
			use: ['html-withimg-loader']
		}
		
		总结： loader 插件都不许要引入
		      plugis，optimization 都需要先引入文件
	</body>
</html>
